<template>
  <div class="config">
    
    <div class="titles"><p>配置管理模块</p></div>
    <!-- 按钮 -->
        <div class="btns">
         
        </div>
    <!-- 表格 -->
    <el-table :data="list" style="width: 100%" size="small">
      <el-table-column type="index" label="序号" width="200"> </el-table-column>
      <el-table-column prop="key" label="名称" width="350"> </el-table-column>
      <el-table-column prop="val" label="信息"> </el-table-column>
      <el-table-column label="操作" width="400" align="center"> 
        <template v-slot="scope">
          <el-button size="small" type="danger" @click="del(scope.row)">删除</el-button>
          <el-button size="small" type="primary" @click="edit(scope.row)">修改</el-button>
          <el-button size="small" type="primary" @click="toAdd(scope.row)">添加</el-button>
        </template>
      </el-table-column>
    </el-table>
<!-- 模态框 -->
    <el-dialog
      class="customer_modal"
      title="添加Config"
      :visible.sync="dialogVisible"
      width="60%">
      {{form}}
      <el-form :model="form" label-width="100px">
        <el-form-item label="名称" >
          <el-input v-model="form.key"></el-input>
        </el-form-item>
        <el-form-item label="信息" >
          <el-input v-model="form.val"></el-input>
        </el-form-item>
      </el-form>
      
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="save" size="small">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>


<style scoped>
.titles{
  float: left;
  margin: 0 auto;
  padding-left: 15px;
}
.titles p{
  font-size: 16px;
	color: #fff;
}

.config{
  background-color: #14c3b5;
  border-radius: 5px;
  height: 50px;
}

.btns{
  float: right;
  margin: 9px auto;
  padding-right: 10px;
}

.inputs{
  float: left;
  margin: auto;
}

.dialog{
  margin: auto;
  text-align: center;
  overflow: hidden;
  
}
</style>


<script>
// 导入request , 浏览器提供给我们的用于与后台进行交互的工具 api
import {get,post} from '@/utils/request'
export default {
  data (){
    return {
      form:{},
      list:[],
      dialogVisible:false,
      state: '',
      timeout:  null
    }
  },
created(){
    this.loadData();
  },
  methods:{
    // 保存
    save(){
      let url = "/cms_config/saveOrUpdate"
      post(url,this.form).then( (response)=>{
        // 1. 模态框关闭
        this.dialogVisible = false;
        // 2. 提示
        this.$message({type:"success",message:response.message})
        // 3. 刷新
        this.loadData();
        this.form ={}
      } )
    },
    // 删除
    del(row){
      let url = "/cms_config/deleteById"
      post(url,{id:row.id}).then( (response)=>{
        // 1. 提示
        this.$message({type:"success",message:response.message})
        // 2. 刷新 
        this.loadData();
      } )
    },
    // 编辑
    edit(row){
      this.form = JSON.parse(JSON.stringify(row));
      this.dialogVisible = true;
    },
    // 加载数据
    loadData(){
      let url = "/cms_config/findAll";
      get(url).then( (response)=>{
        // response就是后端返回给我们的Message{status,message,data,timestamp}
        this.list = response.data;
      } );
    },
toAdd(){
      this.dialogVisible = true;
    },

    toserch(){
      let url = "/cms_config/findAll"
      get(url).then( (response)=>{
        // response就是后端返回给我们的Message{status,message,data,timestamp}
        this.list = response.data;
      } );
    },

    loadAll() {
      return [
        {"key":"奥迪Q1","val":"20w"},
        {"key":"奥迪Q2","val":"20w"},
        {"key":"奥迪Q3","val":"40w"},
        {"key":"奥迪Q4","val":"60w"},
          {"key":"奥迪Q4","val":"40w"},
            {"key":"奥迪Q4","val":"40w"},
              {"key":"奥迪Q4","val":"40w"}

      ];
    },
    querySearchAsync(queryString, cb) {
        var list = this.list;
        var results = queryString ? list.filter(this.createStateFilter(queryString)) : list;

        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 3000 * Math.random());
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelect(item) {
        console.log(item);
      }
    },
    mounted() {
      this.list = this.loadAll();
  }
};
</script>
